<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    ul,
    li {
        list-style: none;
    }

    .container li {
        float: left;
        margin: 10px 10px;
    }

    .container li img {
        width: 310px;
        height: 206px;
    }
</style>

<body>
    <div>
        <ul class="container" style="overflow: hidden">
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643887994&t=d5625f426ec8f4b83ebe0ffdbaa5731f"
                    data-src="./imgs/2.jpg"></li>
        </ul>
    </div>
    <script src="./jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $.fn.extend({
            lazyImg: function () {
                var promise = {
                    // 监听滚动事件
                    bind: function ($target, $c) {
                        var me = this,
                            timer = null,
                            interval = 100;

                        $(window).on('scroll', function (e) {
                            timer && clearTimeout(timer); // 优化滚动的时候重复执行滚动事件
                            timer = setTimeout(function () {
                                me.checkShow($target, $c);
                            }, interval);
                        });
                    },
                    // 检测是否展示图片
                    checkShow: function ($target, $c) {
                        var me = this;
                        $target.each(function () {
                            var $cur = $(this);
                            if (me.isShow($cur, $c)) {
                                setTimeout(function () {
                                    me.showImg($cur);
                                }, 300);
                            }
                        });
                    },
                    // 判断是否在可视窗口内
                    isShow: function ($el, $c) {
                        var scrollH = $c.scrollTop(),
                            winH = $c.height(),
                            top = $el.offset().top;
                        if (top < winH + scrollH) {
                            if ($el.data('isLoaded') === true) { // 判断是否已经加载，加载则不用重复调用
                                return false;
                            } else {
                                $el.data('isLoaded', true)
                                // console.log(scrollH+winH, top);
                                return true;
                            }
                        } else {
                            return false;
                        }
                    },
                    // 展示图片
                    showImg: function ($el) {
                        $el.attr('src', $el.attr('data-src'));
                    }
                }
                var $imgs = this;
                this.$c = $(window);
                this.$target = $imgs;
                promise.checkShow(this.$target, this.$c); // 初始化时判断一次
                promise.bind(this.$target, this.$c);
                return this;
            }
        })
        $('img').lazyImg(); // 调用格式
    </script>
</body>

</html>